<!-- 扫码界面 -->
<script setup lang="ts">
const router = useRouter()

/**
 * @description 识别到二维码时触发
 */
function handleScanCode(e: any) {
  if (e.detail.result) {
    router.push({
      name: 'checkInInfo',
      params: { id: e.detail.result },
    })
  }
}
</script>

<template>
  <camera
    class="h-screen w-screen"
    mode="scanCode"
    device-position="back"
    flash="off"
    @scancode="handleScanCode"
  />
  <view class="fixed left-0 top-0 h-screen w-screen flex flex-col">
    <!-- 上 -->
    <view class="h-256rpx w-full bg-#333333 bg-opacity-90" />
    <!-- 中 -->
    <view class="h-432rpx w-full flex">
      <view class="h-full flex-grow-1 bg-#333333 bg-opacity-90" />
      <!-- 透明区域 -->
      <view class="h-432rpx w-432rpx flex-grow-0 border-8rpx border-#474746 rounded-20rpx" />
      <view class="h-full flex-grow-1 bg-#333333 bg-opacity-90" />
    </view>
    <!-- 下 -->
    <view class="w-full flex-grow-1 bg-#333333 bg-opacity-90" />

    <!-- 提示文字 -->
    <view class="absolute top-780rpx text-28rpx text-white leading-40rpx x-center">
      请扫描二维码进行签到
    </view>
    <!-- 四个角角 -->
    <image class="absolute top-238rpx h-468rpx w-468rpx x-center" src="@/static/images/scan/scan_frame.png" />
    <!-- 扫码动画 -->
    <view class="highlight">
      <view class="shadow" />
      <view class="bar" />
    </view>
  </view>
</template>

<style scoped>
.highlight {
  position: absolute;
  top: 20rpx;
  left: 50%;
  animation: 3s scan ease-in-out infinite;
}

@keyframes scan {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  5% {
    opacity: 0.24;
  }
  10% {
    opacity: 0.5;
  }
  15% {
    opacity: 1;
  }
  65% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.24;
  }
  75% {
    transform: translateX(-50%) translateY(500rpx);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(500rpx);
    opacity: 0;
  }
}

.shadow {
  width: 541rpx;
  height: 200rpx;
  background: linear-gradient(180deg, rgba(0,55,174,0) 0%, rgba(0,55,174,0.66) 100%);
}

.bar {
  width: 541rpx;
  height: 8rpx;
  background: #0037AE;
}
</style>

<route lang="yaml">
name: 'scanQRCode'
style:
  navigationBarTitleText: '扫码签到'
  disableScroll: true
  backgroundColor: '#000000'
layout: 'custom'
</route>
